<template>
  <div class="app-container">
    <div>
      <el-descriptions title="基础信息"  :contentStyle="CS" :label-style="LS " :column="3" style="align-content: center;">
        <el-descriptions-item label="合集id">{{testCollection.id}}</el-descriptions-item>
        <el-descriptions-item label="合集名称">{{testCollection.collectionName}}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{testCollection.createTime}}</el-descriptions-item>
        <el-descriptions-item label="修改时间">{{testCollection.updateTime}}</el-descriptions-item>
      </el-descriptions>
    </div>
    <div>
      <div class="filter-container">
        <el-row style="left: 80%;">
          <el-button v-waves class="filter-item" type="primary" @click="add"  >新增</el-button>
          <el-button v-waves class="filter-item" type="primary" @click="deletelist"  >删除</el-button>
          <el-button v-waves class="filter-item" type="primary" @click="caseListSort"  >保存</el-button>
          <el-button  v-waves class="filter-item" type="primary" @click="back"   >返回</el-button>
        </el-row>
      </div>
      <el-descriptions title="测试用例">
      </el-descriptions>
        <el-table
        :key="tableKey"
        v-loading="listLoading"
        :data="records"
        border
        fit
        highlight-current-row
        style="width: 100%;"
        @sort-change="sortChange"
        ref="multipleTable"
      >
        <el-table-column type="selection" width="50"></el-table-column>
        <el-table-column fixed prop="caseId" label="ID" width="50" align="center">
        </el-table-column>
        <el-table-column prop="caseName" label="用例名称" min-width="150" :show-overflow-tooltip='true' align="center">
        </el-table-column>
        <el-table-column v-if="showReviewer" prop="interfaceName" label="接口名称" width="100" :show-overflow-tooltip='true' align="center">
        </el-table-column>
        <el-table-column prop="ip" label="IP地址" width="150" :show-overflow-tooltip='true' align="center">
        </el-table-column>
        <el-table-column prop="requestPath" label="请求路径" width="100" :show-overflow-tooltip='true' align="center">
        </el-table-column>
        <el-table-column prop="parameterType" label="参数类型" width="100" align="center">
        </el-table-column>
        <el-table-column prop="requsetMethod" label="请求方式" width="100" align="center">
        </el-table-column>
        <el-table-column v-if="showReviewerIp" prop="port" label="端口" width="100" align="center">
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" min-width="150" align="center">
        </el-table-column>
        <el-table-column prop="createName" label="创建人" width="100" align="center">
        </el-table-column>
        <el-table-column prop="remark" label="备注" width="150" :show-overflow-tooltip='true' align="center">
        </el-table-column>
        <el-table-column prop="sort" label="排序" width="100">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="300">
          <template slot-scope="scope">
            <el-button @click="update(scope.row.caseId)" type="text" size="small">排序</el-button>
           <el-button @click="relation(scope.row)" type="text" size="small">关联</el-button>
            <el-button @click="deleteOne(scope.row.caseId)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
              <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="current"
                :page-sizes="pagesizes" :page-size="size" layout="total, sizes, prev, pager, next, jumper" :total="total">
              </el-pagination>
      </div>

      <!--  编辑界面 -->
      <el-dialog title="编辑接口" :visible.sync="sortUpdateFrom" width="500px">
        <el-form :model="caseSortFrom">
          <el-form-item label="排序:" :label-width="formLabelWidth">
            <el-input v-model="caseSortFrom.sort" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="sortUpdateFrom = false">取 消</el-button>
          <el-button type="primary" @click="updateSort()">确 定</el-button>
        </div>
      </el-dialog>

      <!--  编辑测试接口 -->
      <el-dialog title="新增测试合集" :visible.sync="dialogFormVisible">
        <el-table :data="recordsCase" border style="width: 100%" ref="multipleTableAdd">
          <el-table-column type="selection" width="50"></el-table-column>
          <el-table-column fixed prop="caseId" label="ID" width="50" align="center">
          </el-table-column>
          <el-table-column prop="caseName" label="用例名称" min-width="150" :show-overflow-tooltip='true' align="center">
          </el-table-column>
          <el-table-column prop="interfaceName" label="接口名称" width="100" :show-overflow-tooltip='true' align="center">
          </el-table-column>
          <el-table-column prop="ip" label="IP地址" width="150" :show-overflow-tooltip='true' align="center">
          </el-table-column>
          <el-table-column prop="requestPath" label="请求路径" min-width="100" :show-overflow-tooltip='true' align="center">
          </el-table-column>
          <el-table-column prop="parameterType" label="参数类型" width="100" align="center">
          </el-table-column>
          <el-table-column prop="requsetMethod" label="请求方式" width="100" align="center">
          </el-table-column>
          <el-table-column prop="port" label="端口" width="100" align="center">
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" width="150" align="center">
          </el-table-column>
          <el-table-column prop="createName" label="创建人" width="100" align="center">
          </el-table-column>
          <el-table-column prop="remark" label="备注" min-width="150" :show-overflow-tooltip='true' align="center">
          </el-table-column>
        </el-table>
        <div class="pagination-container">
          <el-pagination @size-change="handleSizeCaseChange" @current-change="handleCurrentCaseChange"
          :current-page="currentCase" :page-sizes="pagesizesCase" :page-size="sizeCase"
          layout="total, sizes, prev, pager, next, jumper" :total="totalCase">
          </el-pagination> 
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addTestCaseCollection()">确 定</el-button>
        </div>
      </el-dialog>

    </div>

  </div>
</template>

<script>
   import BackToTop from '@/components/BackToTop'
   import waves from '@/directive/waves'
   import {postList,deletelistPost,sortPost,findAllCasePost,addPost} from '@/api/automation/testCollectionDetatil'
   export default {
    name: "TestCollectionDetatil",
    directives: { waves },
    components: { BackToTop },
    data() {
      return {
        CS: {
          'text-align': 'center',  //文本居中
          'min-width': '250px',   //最小宽度
          'word-break': 'break-all'  //过长时自动换行
        },
        LS: {
          'color': '#000',
          'text-align': 'center',
          'font-weight': '600',
          'height': '40px',
          'background-color': 'rgba(255, 97, 2, 0.1)',
          'min-width': '110px',
          'word-break': 'keep-all',
        },
        tableKey:0,
        listLoading: true,
        user: {},
        current: 1,
        size: 10,
        total: 0,
        pagesizes: [10, 20, 50, 100],
        records: [],
        interfaceName: "",
        requsetMethod: "",
        requestPath: "",
        collectionId: "",
        testCollection: {},
        collectionCaseSortFrom: {},
        sortUpdateFrom: false,
        caseSortFromList: [],
        caseSortFrom: {},
        formLabelWidth: "120",
        dialogFormVisible: false,
        sizeCase: 10,
        currentCase:1,
        totalCase: 0,
        recordsCase: [],
        pagesizesCase: [10, 20, 50, 100]

      }
    },
    methods: {
      getUser() {
        var json = localStorage.getItem("user");
        this.user = JSON.parse(json);
        var collectionId = localStorage.getItem("testCollectionId");
        this.collectionId = collectionId;
      },
      //条数变更
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.findAll(val, this.current)
      },
      //页码变更
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.findAll(this.size, val)
      },
      //测试用例条数变更
      handleSizeCaseChange(val) {
        console.log(`每页 ${val} 条`);
        this.findAllCase(val, this.currentCase)
      },
      //测试用例页码变更
      handleCurrentCaseChange(val) {
        console.log(`当前页: ${val}`);
        this.findAllCase(this.sizeCase, val)
      },
      findAll(size, current) {
        this.listLoading=true;
        postList( {
          current: current,
          size: size,
          interfaceName: this.interfaceName,
          requsetMethod: this.requsetMethod,
          requestPath: this.requestPath,
          collectionId: this.collectionId
        }).then(resp => {
            this.total = resp.data.total;
            this.current = resp.data.current;
            this.size = resp.data.size;
            this.records = resp.data.records;
            this.testCollection = resp.data.testCollection;
            setTimeout(() => {
              this.listLoading = false
            }, 1.5 * 1000)
        })
      },
      deletelist() {
        var caseIdList = [];
        this.$refs.multipleTable.selection.forEach(item => {
          caseIdList.push(item.caseId);
        });
        deletelistPost( {
          caseIdList: caseIdList,
          collectionId: this.collectionId
        }).then(resp => {
            this.$message({
              message: resp.msg,
              type: 'success'
            });
            this.findAll(this.size, this.current);
        })
      },
      deleteOne(caseId) {
        var caseIdList = [];
        caseIdList.push(caseId);
        deletelistPost( {
          caseIdList: caseIdList,
          collectionId: this.collectionId
        }).then(resp => {
            this.$message({
              message: resp.msg,
              type: 'success'
            });
            this.findAll(this.size, this.current);
        })
      },
      update(caseId) {
        localStorage.setItem("TestCollectionCaseId", caseId);``
        this.sortUpdateFrom = true;
      },
      updateSort() {
        var caseId = localStorage.getItem("TestCollectionCaseId");
        this.caseSortFrom.caseId = caseId;
        this.caseSortFromList.push(this.caseSortFrom);
        this.caseSortFrom = {};
        this.sortUpdateFrom = false;
        this.findAll(this.size, this.current);
      },
      caseListSort() {
        sortPost( {
          collectionId: this.collectionId,
          caseSortFromList: this.caseSortFromList
        }).then(resp => {
            this.$message({
              message: resp.msg,
              type: 'success'
            });
            this.caseSortFromList = [];
            this.findAll(this.size, this.current);
        })
      },
      //查询所有的测试用例
      findAllCase(sizeCase, currentCase) {
        findAllCasePost( {
          current: currentCase,
          size: sizeCase,
          interfaceName: this.interfaceName,
          requsetMethod: this.requsetMethod,
          requestPath: this.requestPath
        }).then(resp => {
            this.totalCase = resp.data.total;
            this.currentCase = resp.data.current;
            this.sizeCase = resp.data.size;
            this.recordsCase = resp.data.records;
        })
      },
      addTestCaseCollection() {
        var caseIdList = [];
        this.$refs.multipleTableAdd.selection.forEach(item => {
          caseIdList.push(item.caseId);
        });
        addPost({
          id: this.collectionId,
          caseIdList: caseIdList
        }).then(resp => {
            this.$message({
              message: resp.msg,
              type: 'success'
            });
            this.dialogFormVisible = false;
            this.findAll(this.size, this.current);
        })
      },
      add(){
        this.findAllCase(this.sizeCase, this.currentCase);
        this.dialogFormVisible = true;
      },
      back(){
        this.$router.push('/automation/testCollection');
      },
      //关联提取
      relation(row){
        localStorage.setItem("AutoExtractionCase", JSON.stringify(row))
         this.$router.push('/automation/autoExtraction');
      },
      sortChange(data) {
        const { prop, order } = data
        if (prop === 'id') {
          this.sortByID(order)
        }
      }


    },
    created() {
      this.getUser();
      this.findAll(this.size, this.current);
    }
  }
</script>

<style>
  .paginationClass {
      position: fixed;
      bottom: 0;
      height: 40px;
      width: 100%;
      text-align: center;
  }
</style>
